<template>
    <dv-border-box7 :color="['#0D3568', '#49ACD6']" backgroundColor="" style="margin-top: 15px;">
        <div class="platewrapper">
            <headline title="连线状态" />
            <div class="cont-wrapper">
                <a-row>
                    <a-col :span="12">
                        <div ref="chartRef1" style="width: 100%; height: 120px;"></div>
                        <div style="color: #fff; text-align: center;">总数 / 在线：55 / 11</div>
                    </a-col>
                    <a-col :span="12">
                        <div ref="chartRef2" style="width: 100%; height: 120px;"></div>
                        <div style="color: #fff; text-align: center;">总数 / 在线：975 / 507</div>
                    </a-col>
                    <a-col :span="12" style="margin-top: 10px;">
                        <div ref="chartRef3" style="width: 100%; height: 120px;"></div>
                        <div style="color: #fff; text-align: center;">总数 / 在线：465 / 100</div>
                    </a-col>
                    <a-col :span="12" style="margin-top: 10px;">
                        <div ref="chartRef4" style="width: 100%; height: 120px;"></div>
                        <div style="color: #fff; text-align: center;">总数 / 在线：229 / 83</div>
                    </a-col>
                </a-row>
            </div>
        </div>
    </dv-border-box7>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

const chartRef1 = ref<Nullable<any>>();
const chartRef2 = ref<Nullable<any>>();
const chartRef3 = ref<Nullable<any>>();
const chartRef4 = ref<Nullable<any>>();

const renderChartEvent1 = () => {

    // 初始化图表
    const initEchart = echarts.init(unref(chartRef1)); 
    // echart图表配置
    const option = {
        title: [{
            text: '项目在线',
            x: 'center',
            top: '55%',
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12,
                fontWeight: '100',
            }
        }, {
            text: '60%',
            x: 'center',
            top: '38%',
            textStyle: {
                fontSize: 14,
                color: '#FFFFFF',
                fontFamily: 'DINAlternate-Bold, DINAlternate',
                foontWeight: '500',
            },
        }],
        polar: {
            radius: ['72%', '82%'],
            center: ['50%', '50%'],
        },
        angleAxis: {
            max: 100,
            show: false,
        },
        radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        series: [{
                name: '',
                type: 'bar',
                roundCap: true,
                barWidth: 90,
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(66, 66, 66, .3)',
                },
                data: [60],
                coordinateSystem: 'polar',

                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: '#16CEB9',
                        },
                        {
                            offset: 1,
                            color: '#6648FF',
                        },
                    ]),
                },
            },
            {
                name: '',
                type: 'pie',
                startAngle: 80,
                radius: ['86%'],
                center: ['50%', '50%'],
                itemStyle: {
                    color: 'rgba(66, 66, 66, .1)',
                    borderWidth: 1,
                    borderColor: '#5269EE',
                },
                data: [100],
            },
            {
                name: '',
                type: 'pie',
                startAngle: 80,
                radius: ['68%'],
                center: ['50%', '50%'],
                itemStyle: {
                    color: 'rgba(66, 66, 66, .1)',
                    borderWidth: 1,
                    borderColor: '#5269EE',
                },
                data: [100],
            }
        ],
    };

    initEchart.setOption(option);

    window.addEventListener('resize', () => { //自适应大小
        initEchart.resize();
    });
};

const renderChartEvent2 = () => {

    // 初始化图表
    const initEchart = echarts.init(unref(chartRef2)); 
    // echart图表配置
    const option = {
        title: [{
            text: '门禁设备',
            x: 'center',
            top: '55%',
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12,
                fontWeight: '100',
            }
        }, {
            text: '40%',
            x: 'center',
            top: '38%',
            textStyle: {
                fontSize: 14,
                color: '#FFFFFF',
                fontFamily: 'DINAlternate-Bold, DINAlternate',
                foontWeight: '500',
            },
        }],
        polar: {
            radius: ['72%', '82%'],
            center: ['50%', '50%'],
        },
        angleAxis: {
            max: 100,
            show: false,
        },
        radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        series: [{
                name: '',
                type: 'bar',
                roundCap: true,
                barWidth: 90,
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(66, 66, 66, .3)',
                },
                data: [40],
                coordinateSystem: 'polar',

                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: '#FF4437',
                        },
                        {
                            offset: 1,
                            color: '#F7C990',
                        },
                    ]),
                },
            },
            {
                name: '',
                type: 'pie',
                startAngle: 80,
                radius: ['86%'],
                center: ['50%', '50%'],
                itemStyle: {
                    color: 'rgba(66, 66, 66, .1)',
                    borderWidth: 1,
                    borderColor: '#5269EE',
                },
                data: [100],
            },
            {
                name: '',
                type: 'pie',
                startAngle: 80,
                radius: ['68%'],
                center: ['50%', '50%'],
                itemStyle: {
                    color: 'rgba(66, 66, 66, .1)',
                    borderWidth: 1,
                    borderColor: '#5269EE',
                },
                data: [100],
            }
        ],
    };

    initEchart.setOption(option);

    window.addEventListener('resize', () => { //自适应大小
        initEchart.resize();
    });
};

const renderChartEvent3 = () => {

    // 初始化图表
    const initEchart = echarts.init(unref(chartRef3)); 
    // echart图表配置
    const option = {
        title: [{
            text: '停车设备',
            x: 'center',
            top: '55%',
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12,
                fontWeight: '100',
            }
        }, {
            text: '22%',
            x: 'center',
            top: '38%',
            textStyle: {
                fontSize: 14,
                color: '#FFFFFF',
                fontFamily: 'DINAlternate-Bold, DINAlternate',
                foontWeight: '500',
            },
        }],
        polar: {
            radius: ['72%', '82%'],
            center: ['50%', '50%'],
        },
        angleAxis: {
            max: 100,
            show: false,
        },
        radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        series: [{
                name: '',
                type: 'bar',
                roundCap: true,
                barWidth: 90,
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(66, 66, 66, .3)',
                },
                data: [22],
                coordinateSystem: 'polar',

                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: '#EAF1FD',
                        },
                        {
                            offset: 1,
                            color: '#2C6EE7',
                        },
                    ]),
                },
            },
            {
                name: '',
                type: 'pie',
                startAngle: 80,
                radius: ['86%'],
                center: ['50%', '50%'],
                itemStyle: {
                    color: 'rgba(66, 66, 66, .1)',
                    borderWidth: 1,
                    borderColor: '#5269EE',
                },
                data: [100],
            },
            {
                name: '',
                type: 'pie',
                startAngle: 80,
                radius: ['68%'],
                center: ['50%', '50%'],
                itemStyle: {
                    color: 'rgba(66, 66, 66, .1)',
                    borderWidth: 1,
                    borderColor: '#5269EE',
                },
                data: [100],
            }
        ],
    };

    initEchart.setOption(option);

    window.addEventListener('resize', () => { //自适应大小
        initEchart.resize();
    });
};

const renderChartEvent4 = () => {

    // 初始化图表
    const initEchart = echarts.init(unref(chartRef4)); 
    // echart图表配置
    const option = {
        title: [{
            text: '停车通道',
            x: 'center',
            top: '55%',
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12,
                fontWeight: '100',
            }
        }, {
            text: '75%',
            x: 'center',
            top: '38%',
            textStyle: {
                fontSize: 14,
                color: '#FFFFFF',
                fontFamily: 'DINAlternate-Bold, DINAlternate',
                foontWeight: '500',
            },
        }],
        polar: {
            radius: ['72%', '82%'],
            center: ['50%', '50%'],
        },
        angleAxis: {
            max: 100,
            show: false,
        },
        radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        series: [{
                name: '',
                type: 'bar',
                roundCap: true,
                barWidth: 90,
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(66, 66, 66, .3)',
                },
                data: [75],
                coordinateSystem: 'polar',

                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: '#E5EF12',
                        },
                        {
                            offset: 1,
                            color: '#3DA901',
                        },
                    ]),
                },
            },
            {
                name: '',
                type: 'pie',
                startAngle: 80,
                radius: ['86%'],
                center: ['50%', '50%'],
                itemStyle: {
                    color: 'rgba(66, 66, 66, .1)',
                    borderWidth: 1,
                    borderColor: '#5269EE',
                },
                data: [100],
            },
            {
                name: '',
                type: 'pie',
                startAngle: 80,
                radius: ['68%'],
                center: ['50%', '50%'],
                itemStyle: {
                    color: 'rgba(66, 66, 66, .1)',
                    borderWidth: 1,
                    borderColor: '#5269EE',
                },
                data: [100],
            }
        ],
    };

    initEchart.setOption(option);

    window.addEventListener('resize', () => { //自适应大小
        initEchart.resize();
    });
};

onMounted(() => {
    renderChartEvent1();
    renderChartEvent2();
    renderChartEvent3();
    renderChartEvent4();
});
</script>

<style scoped>

</style>